<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-19 15:37:48
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-02-19 18:14:56
 * @FilePath: /XMate-h5/src/views/customer/customerDetail/components/visitRecord/visitRecordOverview.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="interest-overview bg-white p-4 mb-4 rounded-lg">
    <div class="flex flex-row mx-[-2px]" v-if="processedData.length">
      <!-- 数据量大于阈值时使用 tooltip 方式 -->
      <template v-if="processedData.length > tooltipThreshold">
        <div
          v-for="(item, index) in processedData"
          :key="index"
          class="pl-[1px] min-w-[15px]"
          :style="{ width: item.percentage + '%' }"
        >
          <el-tooltip
            :content="tooltipContent(item)"
            effect="dark"
            raw-content
            placement="bottom"
            :trigger="isPC ? 'hover' : 'click'"
            :teleported="true"
          >
            <div
              class="progress-bar h-4 w-full"
              :class="{
                'rounded-l-sm': index === 0,
                'rounded-r-sm': index === processedData.length - 1,
                'scale-active': tooltipVisibility[index],
              }"
              :style="{
                backgroundColor: item.color,
              }"
              @mouseenter="isPC && (tooltipVisibility[index] = true)"
              @mouseleave="isPC && (tooltipVisibility[index] = false)"
              @click="!isPC && toggleTooltip(index)"
            ></div>
          </el-tooltip>
        </div>
      </template>

      <!-- 数据量小于等于阈值时使用上下显示方式 -->
      <template v-else>
        <div
          v-for="(item, index) in processedData"
          :key="index"
          class="pl-[1px] flex flex-col"
          :style="{ width: item.percentage + '%' }"
        >
          <!-- 上部分数字 -->
          <div
            class="text-[#595959] text-sm text-center mb-2 min-h-[40px] flex items-end justify-center"
          >
            {{ item.count }}（{{ item.percentage }}%）
          </div>

          <!-- 中间色块 -->
          <div
            class="progress-bar h-4 w-full"
            :class="{
              'rounded-l-sm': index === 0,
              'rounded-r-sm': index === processedData.length - 1,
            }"
            :style="{
              backgroundColor: item.color,
            }"
          ></div>

          <!-- 下部分标题 -->
          <div
            class="title text-sm text-[#595959] text-center mt-2 min-h-[40px] flex items-start justify-center"
          >
            {{ item.title }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { isPC } from "@/utils/platformTool";

// 生成 tooltip 内容（仅在数据量大于4时使用）
function tooltipContent(item) {
  return `<strong style="color: ${item.color}">${item.title}</strong><br>${item.count}（${item.percentage}%）`;
}

const props = defineProps({
  processedData: {
    type: Array,
    default: () => [],
    required: true,
  },
  // 当超出 tooltipThreshold 时，使用 tooltip 方式显示数据
  tooltipThreshold: {
    type: Number,
    default: 5,
    validator: (value) => value > 0,
  },
});

// 控制 tooltip 显示状态
const tooltipVisibility = ref([]);

// 初始化 tooltipVisibility 数组
watchEffect(() => {
  tooltipVisibility.value = new Array(props.processedData.length).fill(false);
});

// 移动端点击切换 tooltip
function toggleTooltip(index) {
  tooltipVisibility.value = tooltipVisibility.value.map((v, i) =>
    i === index ? !v : false
  );
}
</script>

<style lang="less" scoped>
.interest-overview {
  .progress-bar {
    transition: all 0.3s ease;
    cursor: pointer;
    transform-origin: center;

    &:hover {
      transform: scaleY(1.2);
    }

    &.scale-active {
      transform: scaleY(1.2);
    }
  }
}

:deep(.el-popper.is-dark) {
  white-space: pre-line;
}
</style>
